<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>抓阄系统3.1</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .content-header {
            display: flex;
            justify-content: center;
        }
        .content-header h1 {
            position: absolute;
            left: 20px;
            bottom: 20px;
            color: #3c8dbc;
        }
        .filter-container {
            display: flex;
            justify-content: space-between;
        }
        .filter-container .select {
            width: 150px;
        }
        .filter-container .button {
            width: 100px;
        }
        .app-container {
            margin-top: 0;
        }

    </style>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>抓阄系统3.1</h1>
        <div class="filter-container">
            <el-input type="password" class="captcha" placeholder="工作室老大是谁" v-model="captcha"
                      style="width: 150px"></el-input>

            <el-select class="select" :disabled="flag" v-model="cid" placeholder="选择班级">
                <el-option value="" label="全部"></el-option>
                <el-option
                        v-for="cls in classarr"
                        :key="cls.id"
                        :label="cls.cname"
                        :value="cls.id">
                </el-option>
            </el-select>
            <el-select class="select" :disabled="flag" v-model="tid" placeholder="选择小组">
                <el-option value="" label="全部"></el-option>
                <el-option
                        v-for="team in grouparr"
                        :key="team.id"
                        :label="team.tname"
                        :value="team.id">
                </el-option>
            </el-select>
            <el-button @click="candidate" :disabled="flag" type="danger" class="button">选人</el-button>
        </div>
    </div>
    <div class="app-container">
        <div class="box">
            <!--学生信息-->
            <el-table size="medium" current-row-key="id" :data="students" stripe highlight-current-row>
                <el-table-column prop="snum" label="学号" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="tname" label="小组" align="center"></el-table-column>
            </el-table>
        </div>
    </div>
</div>
</body>

<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            cid: '',
            tid: '',
            students:[],
            classarr:[],
            grouparr:[],
            captcha: '',
            flag: true,
        },
        watch: {
            cid: {
                handler(newVal, oldVal) {
                    axios.get("/group?classes="+newVal).then((res)=>{
                        this.grouparr=res.data;
                        this.tid = ''
                    })
                }
            },
            captcha: {
                handler(newVal, oldVal) {
                    if (newVal === 'gzsldsw')
                        this.flag = false
                    else {
                        this.flag = true
                        // this.$message.error('给我si！！！')
                    }
                }
            }
        },
        methods:{
            candidate(){
                axios.get("/start?classes="+this.cid+"&team="+this.tid).then((res)=>{
                    this.students.unshift(res.data);
                })
            }
        },
        created(){
            axios.get("/classes").then((res)=>{
                this.classarr=res.data;
            })
        }
    })

    // 禁止右键
    document.oncontextmenu = function () { return false; };
</script>

</html>